<!-- 1. 逻辑代码 写函数 定义数据-->

<script setup lang="ts">
import { ref } from 'vue'

let isShow = ref(false)
const age = ref(4)
</script>

<!-- 2. 结构 -->
<template>
  <button @click="isShow = !isShow">切换显示</button>
  <!--  v-show 的本质 是通过修改样式的方式（diaplay: none）控制显示隐藏， 元素始终在页面上存在 -->
  <img
    v-show="isShow"
    src="https://cbu01.alicdn.com/img/ibank/O1CN01x7xkK320dtCvOa3Vx_!!2219387656873-0-cib.220x220.jpg"
    alt=""
  />
  <!-- v-if 的本质 从页面中移除或添加dom元素， 比较耗费性能， 频繁切换元素推荐使用 v-show -->
  <!-- v-if 的本质 从页面中移除或添加dom元素， 比较耗费性能， 频繁切换元素推荐使用 v-show -->
  <img
    v-if="isShow"
    src="https://cbu01.alicdn.com/img/ibank/O1CN01x7xkK320dtCvOa3Vx_!!2219387656873-0-cib.220x220.jpg"
    alt=""
  />
  <button @click="age++">成长{{ age }}</button>
  <div v-if="age < 5">玩泥巴</div>
  <div v-else-if="age >= 5 && age < 18">偷偷摸摸去网吧</div>
  <div v-else>光明正大去网吧</div>
</template>
<!-- 3. 样式 -->
<style scoped>
img {
  width: 200px;
  height: 200px;
}
</style>
